<template>
	<div class="order">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>
		<h1>用户管理</h1>
		<el-card style="margin-top: 20px;">
			<el-row :gutter="20">
				<el-col :span="8">
					<el-input placeholder="请输入查询内容" v-model="queryInfo.query" clearable @clear="getOrderList">
						<el-button slot="append" icon="el-icon-search" @click="search()">
						</el-button>
					</el-input>
				</el-col>
				<el-col :span="8">
					<el-button type="primary" @click="goAddPage">添加用户</el-button>
				</el-col>
			</el-row>
			<!--表格区域-->
			<el-table :data="orderList" height="700" border stripe v-loading="loading" element-loading-text="拼命加载中"
				style="margin-top: 20px;">
				<el-table-column label="用户编号" width="200px" prop="user_id" sortable></el-table-column>
				<el-table-column label="用户名" width="200px" prop="user_name" sortable></el-table-column>
				<el-table-column label="用户密码" width="200px" prop="user_password" sortable></el-table-column>
				<el-table-column label="用户创建账号时间" width="200px" prop="user_create_time" sortable></el-table-column>
				<el-table-column label="用户上次登录账号时间" width="200px" prop="user_last_login" sortable></el-table-column>	
				<el-table-column label="用户状态" width="200px" prop="user_status" sortable></el-table-column>	
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(scope.row.user_id)">
						</el-button>
						<el-button type="danger" size="mini" icon="el-icon-delete"
							@click="removeById(scope.row.user_id)"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<!--分页-->
			<el-pagination background @current-change="handleCurrentChange" :current-page="currentPage"
				:page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total" />
		</el-card>
	</div>
</template>

<script>
import axios from 'axios';
export default{
	name: "user",
	data(){
		return{
			currentPage: 1,
			pageSize: 8,
			queryInfo: {
				query: '',
			},
			orderList: [],
			loading: true,
		}
	},
	methods:{
		// 获取总长度
		getOrderList() {
			axios.get('http://localhost:8080/user/findAll')
			.then(res=>{
				this.total = res.data.length;
				this.loading = false;	
			},err=>{
				console.log(err);
			})
		},
		findByLimit(){
			var item = (this.currentPage - 1) * 8;
			axios.get('http://localhost:8080/user/findByLimit?start='+item+"&size="+this.pageSize)
			.then(res=>{
				this.orderList = res.data;
			},err=>{
				console.log(err);
			})
		},
		removeById(index) {
			this.$confirm("永久删除该订单, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				})
				.then(() => {
					axios.get("http://localhost:8080/user/delete?user_id=" + index)
						.then((res) => {
							if (res.data.success) {
								this.$message({
									type: "success",
									message: "删除成功"
								});
								this.getOrderList();
								this.findByLimit();
							} else {
								this.$message({
									type: "error",
									message: "删除失败"
								});
							}
						})
				}).catch(() => {
					this.$message({
						type: "info",
						message: "已取消删除"
					});
				});
		},
		handleCurrentChange(nowPage) {
			this.currentPage = nowPage;
			var item = (this.currentPage - 1) * 8;
			axios.get("http://localhost:8080/user/findByLimit?start=" + item+"&size=" + this.pageSize)
				.then((res) => {
					this.orderList = res.data;
				});
		},
		search(){
			var item = (this.currentPage - 1) * 8;
			axios.get("http://localhost:8080/user/findByStatus?info="+this.queryInfo.query)
			.then(res=>{
				this.total = res.data.length;
				axios.get("http://localhost:8080/user/findByStatusLimit?info="+this.queryInfo.query+"&start=" + item+"&size=" + this.pageSize)
				.then(res=>{
					this.orderList = res.data;
				},err=>{
					console.log(err);
				})
			},err=>{
				console.log(err);
			})
		},
		goAddPage() {
			this.$router.push('/adduser');
		},
		edit(id){
			this.$router.push({
				path: '/edituser',
				query: {
					user_id: id
				}
			})
		}
	},
	created(){
		this.getOrderList();
		this.findByLimit();
	}
}
</script>

<style>
</style>
